<script setup>
import FanCell from '..'
import Tag from '../../tag/tag.vue'
import Icon from '../../icon/icon.vue'
</script>

<template>
	<demo-block title="基础用法">
		<FanCell title="单元格" value="内容" />
		<FanCell title="单元格" value="内容" desc="描述信息" />
	</demo-block>

	<demo-block title="展示图标">
		<FanCell title="单元格" value="内容" prefix-icon="environment" />
		<FanCell title="单元格" value="内容" prefix-icon="environment" prefix-icon-color="#FF4A4A" />
	</demo-block>
	<!-- 
  <demo-block title="展示箭头">
    <FanCell title="单元格" is-link />
    <FanCell title="单元格" value="内容" is-link />
    <FanCell title="单元格" value="内容" is-link arrow-direction="down" />
  </demo-block> -->

	<!-- <demo-block title="页面导航">
    <FanCell title="URL 跳转" is-link url="https://github.com" />
    <FanCell title="路由跳转" is-link to="index" />
  </demo-block> -->

	<demo-block title="使用插槽">
		<FanCell value="内容">
			<!-- 使用 title 插槽来自定义标题 -->
			<template #title>
				<span class="custom-title">单元格</span>
				<Tag type="primary">标签</Tag>
			</template>
		</FanCell>

		<FanCell title="单元格" prefix-icon="environment">
			<!-- 使用 icon-suffix 插槽来自定义icon -->
			<template #icon-suffix>
				<Icon name="byn-search" :size="14" />
			</template>
		</FanCell>
	</demo-block>

	<demo-block title="垂直居中">
		<FanCell title="单元格" value="内容" desc="描述信息" value-color="red" center />
		<FanCell title="单元格" value="内容" desc="描述信息" prefix-icon="environment" prefix-icon-center value-color="red" center />
	</demo-block>

	<demo-block title="自定义样式">
		<FanCell title="单元格" value="内容" desc="描述信息" center :style="{ width: '94%', margin: 'auto' }"
			:titleStyle="{ color: '#FF4A4A', fontSize: '15px' }" :valueStyle="{ color: '#1890FF', fontSize: '17px' }"
			:descStyle="{ color: '#FF9999', fontSize: '13px' }" />
	</demo-block>
</template>
